<template>
    <div id="home">
        <h2>home组件</h2>
        <hr>
        <ul>
            <li v-for="item in list">
                {{item.title}}
            </li>
        </ul>
    </div>
</template>

<script>
    /**
     * vue请求数据的模板
     * 1.vue-resources 官方提供的一个vue模板
     * 2.axios
     * 3.fetch-jsonp
     */
    export default {
        name: "app",
        data() {
            return {
                msg: "首页组件",
                list: []
            };
        },
        mounted() {
            // 也可以这么使用
            var api = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
            //第一种方式
            // this.$http.get(api).then(function (response) {
            //   console.log(response);
            //   this.list = response.body.result;
            // }, function (err) {
            //   console.log(err);
            // })
            this.$http.get(api).then(
                response => {
                    console.log(response);
                    this.list = response.body.result;
                },
                function (err) {
                    console.log(err);
                }
            );
        }
    };
</script>

<style lang="scss">
</style>